<template>
  <div class="items">
    <div class="item" @click="enterDetail(item.id)" v-for="item in items" :key="item.id">
      <img :src="item.pic" alt="" class="item-img" />
      <div class="item-info">
        <h3>{{ item.name }}</h3>
        <div class="item-action">
          <p class="price">￥{{ item.minPrice }}</p>
          <van-icon
            @click.stop="onAddCart(item.id)"
            name="gouwuchetianjia"
            color="#f66"
            :size="20"
            class-prefix="icon"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
interface Props {
  items: Item[];
}
defineProps<Props>();
const emits = defineEmits(["onAddCart"]);
// 点击加入购物车按钮
const onAddCart = (id: number) => {
  emits("onAddCart", id);
};
// 跳转到商品详情
const enterDetail = (id: number) => {
  router.push({
    path: "/detail",
    query: {
      id,
    },
  });
};
</script>

<style scoped lang="scss">
.item {
  display: flex;
  &-img {
    width: 3rem;
  }
  &-info {
    padding: 0 10px;
    flex: 1;
    .item-action {
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
</style>
